<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <header th:replace="header::html"></header>
</head>

<body>
<div class="x-body">
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">

                <input type="hidden" id="L_username" name="username" autocomplete="off" class="layui-input">

                <div class="layui-form-item">
                    <label for="O_pass" class="layui-form-label">
                        <span class="x-red">*</span>当前密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="O_pass" name="oldPassword" lay-verify="oldPassword"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">
                        <span class="x-red">*</span>新密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_pass" name="newPassword" lay-verify="newPassword"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        4到16个字符
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                        <span class="x-red">*</span>确认新密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="newPassword2" required="" lay-verify="newPassword2"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        4到16个字符,且与新密码一致
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="add" class="layui-form-label">
                    </label>
                    <button class="layui-btn" id="add" lay-filter="add" lay-submit="">
                        <i class="iconfont">&#xe6ad;</i>立即修改
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $("#L_username").val(localStorage.username);
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            newPassword: [/(.+){4,16}$/, '密码必须4到16位'],
            newPassword2: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            $.ajax({
                url: "/user/changePassword",
                type: "POST",
                data: data.field,
                dataType: 'json',
                success: function (result) {
                    if (result.code != 200) {
                        layer.alert(result.msg);
                    } else {
                        layer.alert("设置成功", {icon: 6}, function (index1) {
                            location.reload();
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>